<template>
  <BasicModal
    v-bind="$attrs"
    :title="props.title"
    :searchInfo="searchInfo"
    width="850px"
    @register="registerModal"
    @ok="handleSubmit"
  >
    <div class="">
      <a-input-search
        v-model:value="value"
        placeholder="请输入"
        style="width: 400px"
        enter-button="搜索"
        @search="onSearch"
      />
    </div>
    <BasicTable
      @register="registerTable"
      @selection-change="selectionChange"
      :modal="setModalRef"
      style="min-height: 300px"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'model'">
          {{ vehicleOptions(record.model) }}
        </template>
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicTable, useTable } from '@/components/Table';
  import { VehicleModel } from '@/enums/comEnum';

  const emit = defineEmits(['success', 'register']);
  const props = defineProps({
    code: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    apiTableList: {
      type: Object,
      default: () => {},
    },
    tableColumn: {
      type: Array,
      default: () => [],
    },
    tableType: {
      type: String,
      default: 'checkbox',
    },
  });
  const value = ref<string>('');
  const setModalRef = ref({});
  const searchInfo = ref({});
  const [registerModal, { closeModal }] = useModalInner();
  console.log('props--------------------', props.code);
  // const [registerInformationModal, { setFieldsValue }] = useForm();setTableData
  const [registerTable, { getDataSource, getSelectRows, reload }] = useTable({
    columns: props.tableColumn,
    showIndexColumn: false,
    api: props.apiTableList.getData,
    // beforeFetch: () => {
    //   return { keyword: value.value, current: 1, size: 10 };
    // },
    rowSelection: {
      type: props.tableType,
    },
    scroll: { y: '100%' },
    pagination: true,
    showTableSetting: true,
    showSelectionBar: true, // 显示多选状态栏
  });
  // 暴露getDataSource 供父组件使用
  defineExpose({ getDataSource });

  const vehicleOptions = (model) => {
    return VehicleModel[model];
  };

  function selectionChange(e) {
    console.log(e);
  }
  async function onSearch() {
    const searchInfo = unref({ keyword: value.value });
    reload({ searchInfo });
  }

  function handleSubmit() {
    console.log(' getSelectRows()()', getSelectRows().length);
    if (getSelectRows().length === 0) return;
    closeModal();
    emit('success', getSelectRows());
  }
</script>
